<template>
  <div class="inbound-container">
    <el-form :inline="true" label-width="120px" :model="form">
      <el-form-item label="业务类型：">
        <div class="item">
          {{
            form.IBType === '1'
              ? '委托仓储入库'
              : form.IBType === '2'
              ? '正常入库'
              : ''
          }}
        </div>
      </el-form-item>
      <el-form-item label="入库单号：">
        <div class="item">{{ form.InComeNo }}</div>
      </el-form-item>
      <el-form-item label="记录单号：">
        <div class="item">{{ form.AcceptanceNo }}</div>
      </el-form-item>
      <el-form-item label="来源单据号：">
        <div class="item">{{ form.SourceBillNo }}</div>
      </el-form-item>
      <el-form-item label="供货单位：">
        <div class="item">{{ form.Supplier }}</div>
      </el-form-item>
      <el-form-item label="合同编码：">
        <div class="item">{{ form.CCode }}</div>
      </el-form-item>
      <el-form-item label="委托单号：">
        <div class="item">{{ form.EntrustNo }}</div>
      </el-form-item>
      <el-form-item label="自定义编号：">
        <div class="item">{{ form.CustomizeNo }}</div>
      </el-form-item>
      <el-form-item label="入库编码：">
        <div class="item">{{ form.Code }}</div>
      </el-form-item>
      <el-form-item label="入库名称：">
        <div class="item">{{ form.FullName }}</div>
      </el-form-item>
      <el-form-item label="结论说明：">
        <div class="item">{{ form.AcceptanceConclusion }}</div>
      </el-form-item>
      <el-form-item label="财务复核人：">
        <div class="item">{{ form.FinancialReviewer }}</div>
      </el-form-item>
      <el-form-item label="入库时间：">
        <div class="item">{{ form.InComeDate }}</div>
      </el-form-item>
      <el-form-item label="采购订单：">
        <div class="item">{{ form.PurchaseNo }}</div>
      </el-form-item>
      <el-form-item label="制单人：">
        <div class="item">{{ form.Documenter }}</div>
      </el-form-item>
      <el-form-item label="实物收料人：">
        <div class="item">{{ form.MaterialReceiver }}</div>
      </el-form-item>
      <el-form-item label="大类号：">
        <div class="item">{{ form.CategoryNumber }}</div>
      </el-form-item>
      <el-form-item label="说明：">
        <div>{{ form.Description }}</div>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" border :data="tableData">
      <el-table-column label="批次号" min-width="100" prop="BatchNo" />
      <el-table-column
        label="物料组编码"
        min-width="100"
        prop="ItemGroupCode"
        show-overflow-tooltip
      />
      <el-table-column label="物料编码" min-width="100" prop="ItemCode" />
      <el-table-column
        label="物料描述"
        min-width="120"
        prop="ItemDescription"
        show-overflow-tooltip
      />
      <el-table-column
        label="辅助物料描述"
        min-width="120"
        prop="AItemDescription"
        show-overflow-tooltip
      />
      <el-table-column label="单位" min-width="90" prop="ItemUnit" />
      <el-table-column label="实收数量" min-width="90" prop="PaidInQuantity" />
      <el-table-column label="采购单价" min-width="90" prop="UnitPrice" />
      <el-table-column label="辅助计量单位" min-width="120" prop="AItemUnit" />
      <el-table-column
        label="辅助计量单位数量"
        min-width="90"
        prop="AItemNum"
      />
      <el-table-column label="实收件数" min-width="90" prop="PaidInNum" />
      <el-table-column
        label="料款金额(元)"
        min-width="100"
        prop="MaterialAmount"
      />
      <el-table-column
        label="运杂费(元)"
        min-width="100"
        prop="TransportAmount"
      />
      <el-table-column label="总金额(元)" min-width="100" prop="TotalAmount" />
      <el-table-column label="毛重(kg)" min-width="90" prop="StockRemark" />
      <el-table-column label="库存备注" min-width="90" prop="StockRemark" />
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="pageNo"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentchiled"
        @size-change="handleSizechiled"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { GetDetailPageData } from '@/api/form'

  const props = defineProps<{
    id: string
  }>()
  const form: any = ref({})
  const tableData: any = ref([])
  const id = props.id || ''
  const pageNo = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const getTableData = async () => {
    const params = {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableName: '',
      sort: '',
      order: '',
      wheres: '',
      export: true,
      value: id,
    }
    const data = await GetDetailPageData(params)
    tableData.value = data.rows || []
    form.value = data.master || {}
  }
  const handleCurrentchiled = (val: number) => {
    pageNo.value = val
  }
  const handleSizechiled = (val: number) => {
    pageSize.value = val
  }

  onMounted(() => {
    getTableData()
  })
</script>

<style lang="scss" scoped>
  .inbound-container {
    .item {
      width: 160px;
    }
  }
</style>
